<template>
	<view style="height: 400rpx">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {};
		},
		mounted() {
			let that = this
			this.$nextTick(() => {
				that.init()
			})
		},
		methods: {
			init() {
				this.$refs.chart.init(echarts, (chart) => {
					let option = option = {
						legend: false,
						xAxis: [{
							type: 'category',
							data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11',
								'12'
							],
							axisPointer: {
								type: 'shadow'
							}
						}],
						yAxis: [{
								type: 'value',
								min: 0,
								max: 250,
								axisLine: {
									show: false
								},
								minorTick: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitLine: {
									show: false
								},
							},
							{
								type: 'value',
								min: 0,
								max: 250,
								axisLine: {
									show: false
								},
								minorTick: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitLine: {
									show: false
								},
							}
						],
						series: [{
								name: 'Evaporation',
								type: 'bar',
								data: [
									15, 12, 23, 54, 84, 250, 24, 51, 21, 12, 14, 250
								],
								color: ['#F2F3FD']
							},
							{
								name: 'Temperature',
								type: 'line',
								yAxisIndex: 1,
								data: [
									15, 12, 23, 54, 84, 250, 24, 51, 21, 12, 14, 250
								],
								smooth: true,
								color: ['#FE4747']
							}
						]
					};
					chart.setOption(option);
				});
			}
		}
	};
</script>